<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.person {
				width: 600px;
				height:760px;
				position: relative;
				margin: 50px 200px;

			
			}
			
			.person div {
				position: absolute;
				
			}
			
			.person div img {
				float: left;
			}
			
			.left-bicep {
				top: 100px;
				z-index: -1;
				-webkit-transform-origin: 26px 19px;
				-webkit-animation: left-bicep 2s linear infinite;
			}
			
			.left-forearm {
				top: 110px;
				left: 13px;
				-webkit-transform-origin: 18px 8px;
				-webkit-animation: left-forearm 2s linear infinite;
			}
			
			.left-thigh {
				top: 230px;
				left: 8px;
				z-index: -1;
				-webkit-transform-origin: 34px 18px;
				-webkit-animation: left-thigh 2s linear infinite;
			}
			
			.left-shin {
				top: 125px;
				left: 5px;
				z-index: -2;
				-webkit-transform-origin: 34px 5px;
				-webkit-animation: left-shin 2s linear infinite;
			}
			
			.left-foot {
				top: 150px;
				left: 0px;
				-webkit-transform-origin: center;
				-webkit-animation: left-foot 2s linear infinite;
			}
			
			.left-toes {
				top: 9px;
				left: 62px;
				-webkit-transform-origin: left;
				-webkit-animation: left-toes 2s linear infinite;
			}
			
			.right-bicep {
							
				top: 80px;
				-webkit-transform-origin: 26px 19px;
				-webkit-animation: right-bicep 2s linear infinite;
				
			}
			
			.right-forearm {
				top: 100px;
				left: 12px;
				-webkit-transform-origin: 18px 8px;
				-webkit-animation: right-forearm 2s linear infinite;
			}
			
			.right-thigh {
				top: 230px;
				left: 10px;
				z-index: -1;
				-webkit-transform-origin: 34px 18px;
				-webkit-animation: right-thigh 2s linear infinite;
			}
			
			.right-shin {
				top: 125px;
				left: 5px;
				z-index: -2;
				-webkit-transform-origin: top;
				-webkit-animation: right-shin 2s linear infinite;
			}
			
			.right-foot {
				top: 150px;
				-webkit-transform-origin: center;
				-webkit-animation: right-foot 2s linear infinite
			}
			
			.right-toes {
				top: 9px;
				left: 62px;
				-webkit-transform-origin: left;
				-webkit-animation: right-toes 2s linear infinite;
			}
			
			.shadow {
				top: 500px;
				left: -200px;
				-webkit-animation: shadow 2s linear infinite;
			}
			
			@-webkit-keyframes person {
				0% {
					-webkit-transform: rotate(5deg) translate( 5px, 0px);
				}
				25% {
					-webkit-transform: rotate(5deg) translate(-5px, -14px);
				}
				50% {
					-webkit-transform: rotate(5deg) translate( 5px, 0px);
				}
				75% {
					-webkit-transform: rotate(5deg) translate(-5px, -14px);
				}
				100% {
					-webkit-transform: rotate(5deg) translate( 5px, 0px);
				}
			}
			/* 左 手臂*/
			
			@-webkit-keyframes left-bicep {
				0% {
					-webkit-transform: rotate(-20deg);
				}
				50% {
					-webkit-transform: rotate(26deg);
				}
				100% {
					-webkit-transform: rotate(-20deg);
				}
			}
			/*左  小手臂 */
			
			@-webkit-keyframes left-forearm {
				0% {
					-webkit-transform: rotate(-45deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
				}
				100% {
					-webkit-transform: rotate(-45deg);
				}
			}
			/* 右 手臂*/
			
			@-webkit-keyframes right-bicep {
				0% {
					-webkit-transform: rotate(26deg);
				}
				50% {
					-webkit-transform: rotate(-20deg);
				}
				100% {
					-webkit-transform: rotate(26deg);
				}
			}
			/*右  小手臂 */
			
			@-webkit-keyframes right-forearm {
				0% {
					-webkit-transform: rotate(-10deg);
				}
				50% {
					-webkit-transform: rotate(-45deg);
				}
				100% {
					-webkit-transform: rotate(-10deg);
				}
			}
			/*左大腿*/
			
			@-webkit-keyframes left-thigh {
				0% {
					-webkit-transform: rotate(10deg);
				}
				50% {
					-webkit-transform: rotate(-45deg);
				}
				100% {
					-webkit-transform: rotate(10deg);
				}
			}
			/*左小腿*/
			
			@-webkit-keyframes left-shin {
				0% {
					-webkit-transform: rotate(20deg);
				}
				25% {
					-webkit-transform: rotate(85deg);
				}
				50% {
					-webkit-transform: rotate(30deg);
				}
				75% {
					-webkit-transform: rotate(20deg);
				}
				100% {
					-webkit-transform: rotate(20deg);
				}
			}
			/*左脚*/
			
			@-webkit-keyframes left-foot {
				0% {
					-webkit-transform: rotate(-10deg);
				}
				25% {
					-webkit-transform: rotate(-25deg);
				}
				50% {
					-webkit-transform: rotate(0deg);
				}
				75% {
					-webkit-transform: rotate(-10deg);
				}
				100% {
					-webkit-transform: rotate(-10deg);
				}
			}
			/*左脚尖*/
			
			@-webkit-keyframes left-toes {
				0% {
					-webkit-transform: rotate(-16deg);
				}
				25% {
					-webkit-transform: rotate(-10deg);
				}
				50% {
					-webkit-transform: rotate(-5deg);
				}
				75% {
					-webkit-transform: rotate(-7deg);
				}
				100% {
					-webkit-transform: rotate(-16deg);
				}
			}
			/*右大腿*/
			
			@-webkit-keyframes right-thigh {
				0% {
					-webkit-transform: rotate(-45deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
				}
				100% {
					-webkit-transform: rotate(-45deg);
				}
			}
			/*右小腿*/
			
			@-webkit-keyframes right-shin {
				0% {
					-webkit-transform: rotate(30deg);
				}
				25% {
					-webkit-transform: rotate(20deg);
				}
				50% {
					-webkit-transform: rotate(20deg);
				}
				75% {
					-webkit-transform: rotate(85deg);
				}
				100% {
					-webkit-transform: rotate(20deg);
				}
			}
			/*右脚*/
			
			@-webkit-keyframes right-foot {
				0% {
					-webkit-transform: rotate(-5deg);
				}
				25% {
					-webkit-transform: rotate(-7deg);
				}
				50% {
					-webkit-transform: rotate(-16deg);
				}
				75% {
					-webkit-transform: rotate(-10deg);
				}
				100% {
					-webkit-transform: rotate(-5deg);
				}
			}
			/*右脚尖*/
			
			@-webkit-keyframes right-toes {
				0% {
					-webkit-transform: rotate(-5deg);
				}
				25% {
					-webkit-transform: rotate(-7deg);
				}
				50% {
					-webkit-transform: rotate(-16deg);
				}
				75% {
					-webkit-transform: rotate(-10deg);
				}
				100% {
					-webkit-transform: rotate(-5deg);
				}
			}
			
			@-webkit-keyframesshadow {
				0% {
					opacity: 1;
				}
				50% {
					opacity: 0.75;
				}
				100% {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<div class="person">
			<div class="left-arm">
				<div class="left-bicep">
					<img src="img/left-bicep.png" />
					<div class="left-forearm">
						<img src="img/left-forearm.png" />
					</div>
				</div>
			</div>
			<div class="left-leg">
				<div class="left-thigh">
					<img src="img/left-thigh.png" />
					<div class="left-shin">
						<img src="img/shin.png" />
						<div class="left-foot">
							<img src="img/foot.png" />
							<div class="left-toes">
								<img src="img/toes.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<img src="img/torso.png" />
			<div class="right-arm">
				<div class="right-bicep">
					<img src="img/right-bicep.png" />
					<div class="right-forearm">
						<img src="img/right-forearm.png" />
					</div>
				</div>
			</div>
			<div class="right-leg">
				<div class="right-thigh">
					<img src="img/right-thigh.png" />
					<div class="right-shin">
						<img src="img/shin.png" />
						<div class="right-foot">
							<img src="img/foot.png" />
							<div class="right-toes">
								<img src="img/toes.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="shadow"><img src="img/shadow.png" /></div>
		</div>
	</body>

</html>